<template>
<div class="contents">
  <div class="content">
    <div class="head">
        <p>发现</p>
        <img src="../assets/斑马阅读图片库/斑马阅读图片库/自己的/2.png" alt="">
    </div>
  </div>
  <div class="ideal">
    <div class="ideal-img">
      <img src="../assets/斑马阅读图片库/斑马阅读图片库/自己的/1 (2).png" alt="">
    </div>
    <p>朋友的想法</p>
  </div>
  <div class="circle">
    <div class="circle-img">
      <img src="../assets/斑马阅读图片库/斑马阅读图片库/自己的/1 (1).png" alt="">
    </div>
    <p>小圈子</p>
  </div>
  <div class="welfare">
    <div class="welfare-img">
      <img src="../assets/斑马阅读图片库/斑马阅读图片库/自己的/1 (4).png" alt="">
    </div>
    <p class="p1">福利场</p>
    <p class="p2">赏飙升榜得1天无限卡</p>
  </div>
  <div class="compoments">
    <div class="compoment">
      <div class="compoment-img">
        <img src="../assets/斑马阅读图片库/斑马阅读图片库/自己的/1 (3).png" alt="">
      </div>
      <p>斑马听书.推荐</p>
    </div>
    <div class="compoment-imgs">
      <img src="../assets/斑马阅读图片库/斑马阅读图片库/自己的/3 (2).png" alt="">
      <img src="../assets/斑马阅读图片库/斑马阅读图片库/自己的/3 (3).png" alt="">
      <img src="../assets/斑马阅读图片库/斑马阅读图片库/自己的/3 (1).png" alt="">
    </div>
    <div class="compoment-text">
      <p>中华上下五千年</p>
      <p>金瓶梅</p>
      <p>人生由我</p>
    </div>
    <div class="cut">
      <p>换一批</p>
    </div>
  </div>
 <tabbar page="Found"/>
</div>
</template>

<script>
// npm i pubsub-js 下载并引入
import pubsub from "pubsub-js"
// npm i axios  全局安装axios 并引入
import axios from "axios"
import tabbar from "../components/tabbar.vue" 

export default {
    name:"Found",
    data() {
        return {
            
        }
    },
     components:{
      tabbar
    },
    props:[],
    methods: {
        
    },
}
</script>

<style scoped>
/* 整体 */
.contents{
  background-color: #F6F6F6;
  padding: 15px;
}
/* 导航栏 */
.head{
  /* padding: 2px 5px; */
  display: flex;
  align-items: center;
  margin: 0px 0 15px 0;
}
.head p{
  font-size: 24px;
  margin-left: 43%;
  /* text-align: center; */
}
.head img{
  width: 30px;
  height: 30px;
  margin-left: auto;
}
/* 想法 */
.ideal{
  height: 70px;
  display: flex;
  background-color: white;
  border-radius: 20px;
  align-items: center;
  /* border: 2px solid rgb(213, 210, 210); */
}
.ideal p{
  font-size: 18px;
  margin-left: 15px;
}
.ideal-img{
  width: 50px;
  height: 50px;
  margin-left: 15px;
  border-radius: 50%;
  /* text-align: center; */
  display: flex;
  /* 垂直居中 */
  align-items: center;
  /* 均分 */
  justify-content: center;
  background-color:#30C2F3;
}
.ideal-img img{
  width: 55%;
  height: 55%;
}
/* 圈子 */
.circle{
  height: 70px;
  display: flex;
  background-color: white;
  margin-top: 20px;
  border-radius: 20px;
  align-items: center;
  /* border: 2px solid rgb(213, 210, 210); */
}
.circle p{
  font-size: 18px;
  margin-left: 15px;
}
.circle-img{
  width: 50px;
  height: 50px;
  margin-left: 15px;
  border-radius: 50%;
  /* text-align: center; */
  display: flex;
  /* 垂直居中 */
  align-items: center;
  /* 均分 */
  justify-content: center;
  background-color:#4CCFA7;
}
.circle-img img{
  width: 55%;
  height: 55%;
}
/* 福利 */
.welfare{
  height: 70px;
  display: flex;
  background-color: white;
  margin-top: 20px;
  border-radius: 20px;
  align-items: center;
  /* border: 2px solid rgb(213, 210, 210); */
}
.welfare>.p1{
  font-size: 18px;
  margin-left: 15px;
}
.welfare>.p2{
  font-size: 15px;
  margin-left: 100px;
  color: rgb(104, 104, 103);
}
.welfare-img{
  width: 50px;
  height: 50px;
  margin-left: 15px;
  border-radius: 50%;
  /* text-align: center; */
  display: flex;
  /* 垂直居中 */
  align-items: center;
  /* 均分 */
  justify-content: center;
  background-color:#FC8817;
}
.welfare-img img{
  width: 55%;
  height: 55%;
}
/* 推荐 */
.compoments{
  background-color: white;
}
.compoment{
  height: 70px;
  display: flex;
  background-color: white;
  margin-top: 20px;
  border-radius: 20px;
  align-items: center;
  /* border: 2px solid rgb(213, 210, 210); */
}
.compoment p{
  font-size: 18px;
  margin-left: 15px;
}
.compoment-img{
  width: 50px;
  height: 50px;
  margin-left: 15px;
  border-radius: 50%;
  /* text-align: center; */
  display: flex;
  /* 垂直居中 */
  align-items: center;
  /* 均分 */
  justify-content: center;
  background-color:#FD550C;
}
.compoment-img img{
  width: 55%;
  height: 55%;
  margin-left: 5px;
}
.compoment-imgs{
  display: flex;
  justify-content: center;
  background-color: white;
}
.compoment-imgs img{
  width: 27%;
  padding: 7px 10px 0 10px;
}
.compoment-text{
  display: flex;
  justify-content: center;
  background-color: white;
}
.compoment-text p{
  width: 27%;
  margin-top: 7px;
  font-size: 18px;
  padding: 0 10px;
}
.cut{
  border: 1px solid rgb(247, 244, 244);
  border-radius: 20px;
  background-color: #F6F6F6;
  height: 70px;
}
.cut p{
  font-size: 20px;
  text-align: center;
}

</style>